<template>
  <div id='allmap' :style='mapStyle'></div>
</template>
<script type="text/ecmascript-6">
  import BMap from 'BMap'
  export default {
    data() {
      return {
        mapStyle: {
          width: '100%',
          height: this.mapHeight + 'px'
        },
        opts: {
          width: 250, // 信息窗口宽度
          height: 130, // 信息窗口高度
          title: '轨迹' // 信息窗口标题
        },
        map1: null,
        myIconM: new BMap.Icon('http://ils.unlcn.com/appdownload/map-icons/26.png', new BMap.Size(25, 25)),
        myIconK: new BMap.Icon('http://ils.unlcn.com/appdownload/map-icons/33.png', new BMap.Size(25, 25)),
        myIconH: new BMap.Icon('http://ils.unlcn.com/appdownload/map-icons/27.png', new BMap.Size(25, 25))
      }
    },
    props: {
      // 地图在该视图上的高度
      mapHeight: {
        type: Number,
        default: 525
      },
      // 经度
      longitude: {
        type: Number,
        default: 116.417854
      },
      // 纬度
      latitude: {
        type: Number,
        default: 39.921988
      },
      dataInfo: {
        type: Array
      }
    },
    mounted() {
      this.ready()
    },
    methods: {
      ready() {
        const vm = this
        const map = new BMap.Map('allmap')
        let marker, content
        const point = new BMap.Point(this.longitude, this.latitude)
        map.centerAndZoom(point, 7)

        for (let i = 0; i < vm.dataInfo.length; i++) {
          const status = vm.dataInfo[i][3]
          let icon
          if (status === 'H') {
            icon = this.myIconH
          } else if (status === 'K') {
            icon = this.myIconK
          } else {
            icon = this.myIconM
          }
          marker = new BMap.Marker(new BMap.Point(vm.dataInfo[i][0], vm.dataInfo[i][1]), { icon: icon }) // 创建标注
          content = vm.dataInfo[i][2]
          map.addOverlay(marker) // 将标注添加到地图中
          vm.addClickHandler(content, marker, map)
        }
        map.enableScrollWheelZoom(true)
        /**
         ***********************************************
         添加工具条、比例尺控件
         /*************************************************/
        map.addControl(new BMap.ScaleControl({ anchor: 'BMAP_ANCHOR_TOP_LEFT' }))
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.NavigationControl({ anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT', type: 'BMAP_NAVIGATION_CONTROL_SMALL' }))
        map.enableScrollWheelZoom(true)
        // content1 = data_info[0][2]
        // let infoWindow = new BMap.InfoWindow(content1, this.opts)  // 创建信息窗口对象
        // map.openInfoWindow(infoWindow,point)//开启信息窗口
        this.map1 = map
      },
      init(dataInfo, longitude, latitude) {
        const vm = this
        const map = new BMap.Map('allmap')
        let marker, content
        const point = new BMap.Point(longitude, latitude)
        map.centerAndZoom(point, 7)

        for (let i = 0; i < dataInfo.length; i++) {
          const status = dataInfo[i][3]
          let icon
          if (status === 'H') {
            icon = this.myIconH
          } else if (status === 'K') {
            icon = this.myIconK
          } else {
            icon = this.myIconM
          }
          marker = new BMap.Marker(new BMap.Point(dataInfo[i][0], dataInfo[i][1]), { icon: icon }) // 创建标注
          content = dataInfo[i][2]
          map.addOverlay(marker) // 将标注添加到地图中
          vm.addClickHandler(content, marker, map)
        }

        map.enableScrollWheelZoom(true)
        /**
         ***********************************************
         添加工具条、比例尺控件
         /*************************************************/
        map.addControl(new BMap.ScaleControl({ anchor: 'BMAP_ANCHOR_TOP_LEFT' }))
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.NavigationControl({ anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT', type: 'BMAP_NAVIGATION_CONTROL_SMALL' }))
        map.enableScrollWheelZoom(true)
        this.map1 = map
      },
      addClickHandler(content, marker, map) {
        const vm = this
        marker.addEventListener('click', function(e) {
          vm.openInfo(content, e, map)
        })
      },
      openInfo(content, e, map) {
        const p = e.target
        const point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
        const infoWindow = new BMap.InfoWindow(content, this.opts) // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point)
      },
      openTips(longitude, latitude, content) {
        const vm = this
        const point = new BMap.Point(longitude, latitude)
        vm.map1.centerAndZoom(point, 7)
        const infoWindow = new BMap.InfoWindow(content, this.opts) // 创建信息窗口对象
        vm.map1.openInfoWindow(infoWindow, point)
      }
    }
  }
</script>

<!--Add'scoped' attribute to limit CSS to this component only -->
<style scoped>

</style>
